import { FC, Fragment, useState, useEffect } from 'react';
import { Divider } from '@mui/material';
import ActiveLink from '../../../components/activeLink';
import Card from '../../../components/card';
import './index.less';

const subNavList = [
  { path: 'follow', title: '关注' },
  { path: '', title: '推荐' },
  { path: 'latest', title: '最新' },
  { path: 'hot', title: '热榜' },
];

const HomeLeft: FC = () => {

  const [blogList, setBlogList] = useState<number[]>([]);

  useEffect(() => {
    setBlogList([1, 2, 3, 4]);
  }, []);

  return (
    <Card className='home-left-container'>
      <ul className='subnav-list'>
        {
          subNavList.map(({ path, title }) =>
            <li key={ title } className='subnav-item'>
              <ActiveLink to={ path }>{ title }</ActiveLink>
            </li>
          )
        }
      </ul>
      <Divider />
      <ul className='content-list'>
        {
          blogList.map((blog, index) => {
            return (
              <Fragment key={ index }>
                <li className='content'>
                  { blog }
                </li>
                {/* 分割线 */}
                { index !== blogList.length - 1 && <Divider /> }
              </Fragment>
            );
          })
        }
      </ul>
    </Card>
  );
};

export default HomeLeft;
